<template>
	<div class="chatview">
		<div ref="_echarts" class="echarts"></div>
	</div>
</template>

<script setup>
    import { reactive, getCurrentInstance, watch } from 'vue'
	import * as echarts from 'echarts/core';
	import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
	import { LineChart } from 'echarts/charts';
	import { UniversalTransition } from 'echarts/features';
	import { CanvasRenderer } from 'echarts/renderers';
    let { proxy } = getCurrentInstance()

	echarts.use([
		TitleComponent,
		ToolboxComponent,
		TooltipComponent,
		GridComponent,
		LegendComponent,
		LineChart,
		CanvasRenderer,
		UniversalTransition
	]);
	
	const props = defineProps({
		data: { type: Object, require: true },
		title: { type: String },
		top: { type: Number, default: 0 },
		left: { type: Number, default: 0 },
		right: { type: Number, default: 0 },
		bottom: { type: Number, default: 0 },
	})

	let obj = reactive({
		option: { 
			title: { 
				text: props.title,
				padding: 5
			},
			xAxis: [{
                type: 'category',
                data: []
            }],
            yAxis: { type: 'value' },
			grid: {
				top: props.top+'%',
				left: props.left+'%',
				right: props.right+'%',
				bottom: props.bottom+'%',
				containLabel: true
			},
			legend: {
				data: [ ]
			},
            series: [ ]
		}
	})

	watch(
		() => [props.data],
		(a, b) => {
			obj.option.xAxis[0].data = props.data.x
			props.data.y.forEach((t,i) => {
				obj.option.series[i] = {
					data:t,
					name: props.data.title?props.data.title[i]:"",
                    type: 'line',
                    smooth: true,
                    label: { show:true }
				}
			})
			obj.option.legend.data = props.data.title
			const tmp = echarts.init(proxy.$refs["_echarts"]);
			tmp.setOption(obj.option);
		}
	)
</script>

<style scoped lang="scss">
    @import "@/assets/echats.scss";
</style>